import React from 'react'
import { inject, observer } from 'mobx-react';
import { withRouter,Route } from 'react-router-dom';
import { Button,Tools,Icon,Flex,Bubble,Toast } from 'weaver-mobile';
import { RouteLayout,Form } from 'weaver-mobile-page';
import * as API from '../../api/fnaSpecial'
import * as mobx from 'mobx'
const ButtonGroup = RouteLayout.ButtonGroup;
const getLabel = Tools.getLabel;

@inject('popupEditStore')
@withRouter
@observer
export default class PopupEditButton extends React.Component {
   constructor(props) {
     super(props);
     this.state = { isNeverSubmit: true };//没有提交过
   }

   componentWillMount(){
    const {wfInfo} = this.props;
    let requestid = wfInfo.requestid;
    let workflowid = wfInfo.requestid;
    API.submitStatus({'requestid':requestid,'workflowid':workflowid}).then(data =>{
      this.setState({
          isNeverSubmit:data.isNeverSubmit
      });     
    }); 
 }
  
   componentDidMount() {
   }

   render() {
    const { popupEditStore,history,fnaSpecialStore }= this.props ;
    const { form,loding }= popupEditStore ;
    const { path,id } = fnaSpecialStore;
    
    //隐藏loding
    if(!loding){
      Toast.hide();
    }

    return (
      <div>
        {this.getInputHtml()}

        <Route
          key={id}
          path={path}
          render={() => (
            <RouteLayout>
              <div
                key="popupList"
                className="wm-route-layout"
              >
                <Form store={form} />
                <ButtonGroup data={this.getFormButton()} />
              </div>
            </RouteLayout>
          )}
        />
      </div>
    );
  }

  //获取不同状态的组件
  getInputHtml = () => {
    const { viewAttr,nodeType,loanAmount,fieldId,rowIndex,fieldObj,isCardEdit }= this.props ;
    const { popupEditStore,history,fnaSpecialStore }= this.props ;
    const { path,id } = fnaSpecialStore;
    const { isNeverSubmit } = this.state;
    let inputHtml = [];
    const isDetail = mobx.toJS(fieldObj).tableMark.indexOf("detail_") > -1;
    const detailtype = mobx.toJS(fieldObj).detailtype;
    const fieldMark = isDetail ? `field${fieldId}_${rowIndex}` : `field${fieldId}`;
    const isRequired = viewAttr === 3 && loanAmount.trim().length === 0;
		const swapClassName = `wf-req-input-item wf-input-${detailtype} wf-input-field${fieldId} ${viewAttr === 1 ? "wf-input-view" : "wf-input-edit"}`;

    if(viewAttr === 1){
      inputHtml = (<div className={swapClassName}>
        <div id={`${fieldMark}span`} className="wf-input-view-box" dangerouslySetInnerHTML={{__html:loanAmount}}></div>
        <input type="hidden" id={fieldMark} name={fieldMark} value={loanAmount}/>
      </div>);
    } else if(viewAttr === 4){
        inputHtml = "";
    } else{//2,3
        if(nodeType === '0'){//新建
          if(isNeverSubmit){
            inputHtml = (<div className={swapClassName}>
                          <input
                            //ref={''}
                            id={fieldMark}
						                name={fieldMark}
                            type={'text'}
                            className="fna-wf-input-edit-box"
                            placeholder={getLabel(390960,"请输入")}
                            value={loanAmount}
                          />
                          {isRequired && 
                            <div className="fna-wf-input-required-icon">
                              <img src="/images/BacoError_wev9.png" align="absmiddle" />
                            </div>
                          }
                          <div className="fna-wf-input-edit-icon">
                              <Icon type="editor-01" />
                          </div>
                        </div>);
          } else {
            inputHtml = (<div className={swapClassName} onClick={this.clickEvent}>
                          <div id={`${fieldMark}span`} className="fna-wf-input-view" dangerouslySetInnerHTML={{__html:loanAmount}} style={{width: '100%'}}></div>
                          <input type="hidden" id={fieldMark} name={fieldMark} value={loanAmount}/>
                          <div className="fna-choose-item-right" style={{ color: '#D1D1D6'}}>
                              <Icon type="right" />
                          </div>
                        </div>);
          }
        }else if(nodeType === '3'){//归档
            inputHtml = loanAmount;
        }else{//1,2
          inputHtml = (<div className={swapClassName} onClick={this.clickEvent}>
                        <div id={`${fieldMark}span`} className="fna-wf-input-view" dangerouslySetInnerHTML={{__html:loanAmount}} style={{width: '100%'}}></div>
                        <input type="hidden" id={fieldMark} name={fieldMark} value={loanAmount}/>
                        <div className="fna-choose-item-right" style={{ color: '#D1D1D6'}}>
                              <Icon type="right" />
                        </div>
                      </div>);
        }
      }
      
      return inputHtml;
  }

  //获取表单的按钮组
  getFormButton = () => {
    const { history }= this.props ;
    let buttonGroupData = [
      {
        key: 'clear',
        text: getLabel(31129,'取消'),
        onClick: () => {this.cancel();},
      },
      {
        key: 'submit',
        text: getLabel(826,'确定'),
        onClick: () => {this.submit();},
        type: 'primary'
      },
    ];

    return buttonGroupData;
  }

  //提交
  submit = () => {
    const { rowIndex,fieldId,fieldSet }= this.props ;
    const { history,popupEditStore }= this.props ;
    const { form }= popupEditStore ;
    let {pass,message} = form.doValidate();//校验

    if(pass){
      let changedAmount = form.formParams.rearAmount;
      let adjustInfo = form.formParams.adjustInfo;
      let msgInfo = "{&quot;amountBorrowBefore&quot;:&quot;"+changedAmount+"&quot;,&quot;memo1&quot;:&quot;"+adjustInfo+"&quot;}";
      if(!/^(([1-9]\d*)|0)(\.\d{0,2}?)?$/.test(changedAmount)){
        Bubble.error(getLabel(391003,'"调整后金额" 只能是2位精度的数字'), 1.5, '50%');
        return;
      }

      window.WfForm.changeFieldValue("field"+fieldId+"_"+rowIndex, {value: changedAmount}); //借款金额
      window.WfForm.changeFieldValue("field"+fieldSet[0]+"_"+rowIndex, {value: msgInfo});//调整说明 存 调整明细  
      history.go(-1);
      form.resetFields();//重置表单
    }
  }

  //取消
  cancel = () => {
    const { history,popupEditStore }= this.props ;
    const { form }= popupEditStore ;
    history.go(-1);
  }

  clickEvent = () => {
    const { popupEditStore,fnaSpecialStore,loanAmount,history,fieldSet,rowIndex,isDetailShow }= this.props ;
    const { getPopupEditForm,form }= popupEditStore ;
    let showValue = window.WfForm.getFieldValue("field"+fieldSet[0]+"_"+rowIndex);
    if(showValue != undefined && showValue !== ""){
      showValue = JSON.parse(showValue);
    }
    let queryData = {
      beforeAmount:loanAmount,
      //rearAmount:showValue.amountBorrowBefore,
      adjustInfo:showValue.memo1
    };

    form.resetFields();//重置表单
    getPopupEditForm(queryData,fnaSpecialStore.path);
    history.push(fnaSpecialStore.path);
    //展示loding
    if(!isDetailShow){
      Toast.loading('Loading...', 5, () => {
      });
    }
  }
}